
<ul class="breadcrumb">
        <li><a href="http://fooplugins.com/plugins/footable-jquery/">FooTable</a> <span class="divider">&raquo;</span>
        </li>
        <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
        <li class="active">Showcase</li>
 </ul>
  
    
<!-- ===================================== END HEADER ===================================== -->
	 
<div class="col_12">
	<div class="col_12">
	<h3><strong>Lista de Art&iacute;culos</strong></h3>
	<p><img class="align-left" src="http://placehold.it/180x150/4D99E0/ffffff.png&text=180x150" width="180" height="150" />
	Se muestra una lista de los <em>art&iacute;culos</em> del sistema.</p>
        </div>
	<div class="col_12">
                   Fechas: <input type="text" class="datepicker" id="datepicker" name="datepicker"/>
                   <!-- Tabs Center -->
                    <ul class="tabs left">
                    <li><a href="#tabc1">Lista de Articulos</a></li>
                    <li><a href="#tabc2"><i class="icon-folder-open"></i> Agregar Articulo</a></li>
                    <li><a href="#tabc3">Detalles</a></li>
                    </ul>

                    <div id="tabc1" class="tab-content">
                
                    <div class="tab-pane active" id="demo">
                        
                        <p>
                            Busqueda: <input id="filter" type="text"/>
                            Estado:
                            <select class="filter-status">
                                <option></option>
                                <option value="active">Active</option>
                                <option value="disabled">Disabled</option>
                                <option value="suspended">Suspended</option>
                            </select>
                            <a href="#clear" class="clear-filter" title="clear filter"><i class="icon-rss"></i> Limpiar</a>
                            <span class="row-count"></span>
                        </p>
                        <table class="table demo" data-filter="#filter" data-page-size="5">
                            <thead>
                            <tr>
                                <th data-toggle="true">
                                    Codigo
                                </th>
                                <th>
                                    Descripcion
                                </th>
                                <th data-hide="phone,tablet">
                                    Impuesto de Consumo
                                </th>
                                <th data-hide="phone,tablet" data-name="Date Of Birth">
                                    Impuesto de Ventas
                                </th>
                                <th data-hide="phone">
                                    Unidad Empaque
                                </th>
                                <th data-toggle="true">
                                    Existencia Maxima
                                </th>
                                <th data-toggle="true">
                                    Existencia Minima
                                </th>
                        </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Isidra</td>
                    <td><a href="#">Boudreaux</a></td>
                    <td>Traffic Court Referee</td>
                    <td data-value="78025368997">22 Jun 1972</td>
                    <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
					<td>Costa Rica</td>
                </tr>
                <tr>
                    <td>Shona</td>
                    <td>Woldt</td>
                    <td><a href="#">Airline Transport Pilot</a></td>
                    <td data-value="370961043292">3 Oct 1981</td>
                    <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
					<td>Costa Rica</td>
                </tr>
                <tr>
                    <td>Granville</td>
                    <td>Leonardo</td>
                    <td>Business Services Sales Representative</td>
                    <td data-value="-22133780420">19 Apr 1969</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
					<td>Panama</td>
                </tr>
                <tr>
                    <td>Easer</td>
                    <td>Dragoo</td>
                    <td>Drywall Stripper</td>
                    <td data-value="250833505574">13 Dec 1977</td>
                    <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
					<td>Panama</td>
                </tr>
                <tr>
                    <td>Maple</td>
                    <td>Halladay</td>
                    <td>Aviation Tactical Readiness Officer</td>
                    <td data-value="694116650726">30 Dec 1991</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
					<td>Colombia</td>
                </tr>
                <tr>
                    <td>Maxine</td>
                    <td><a href="#">Woldt</a></td>
                    <td><a href="#">Business Services Sales Representative</a></td>
                    <td data-value="561440464855">17 Oct 1987</td>
                    <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
					<td>Colombia</td>
                </tr>
                <tr>
                    <td>Lorraine</td>
                    <td>Mcgaughy</td>
                    <td>Hemodialysis Technician</td>
                    <td data-value="437400551390">11 Nov 1983</td>
                    <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
					<td>Nicaragua</td>
                </tr>
                <tr>
                    <td>Lizzee</td>
                    <td><a href="#">Goodlow</a></td>
                    <td>Technical Services Librarian</td>
                    <td data-value="-257733999319">1 Nov 1961</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
					<td>Nicaragua</td>
                </tr>
                <tr>
                    <td>Judi</td>
                    <td>Badgett</td>
                    <td>Electrical Lineworker</td>
                    <td data-value="362134712000">23 Jun 1981</td>
                    <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
					<td>Mexico</td>
                </tr>
                <tr>
                    <td>Lauri</td>
                    <td>Hyland</td>
                    <td>Blackjack Supervisor</td>
                    <td data-value="500874333932">15 Nov 1985</td>
                    <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
                    <td>Mexico</td>
                            </tr>
                            </tbody>
                            <tfoot class="hide-if-no-paging">
                            <tr>
                                <td colspan="12">
                                    <div class="pagination pagination-centered"></div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div><!--div tab-pane active end-->

                    </div> <!--Tab 1 end-->
                    <div id="tabc2" class="tab-content">Tab2 has an icon.</div><!--Tab 2 end-->
                    <div id="tabc3" class="tab-content">Tab3</div><!--Tab 3 end-->
            
	
	</div>
	
    <div class="col_9">
    <h3><strong>Informaci&oacute;n del Art&iacute;culo</strong></h3>
    <!-- Disabled Field -->
    
        <div class="col_3">
	<h5>Icon List</h5>
	<ul class="icons">
	<li><i class="icon-ok"></i> Apple</li>
	<li><i class="icon-ok"></i> Banana</li>
	<li><i class="icon-ok"></i> Orange</li>
	<li><i class="icon-ok"></i> Pear</li>
	</ul>
	
	<h5>Sample Icons</h5>
	<i class="icon-twitter-sign icon-4x"></i> 
	<i class="icon-facebook-sign icon-4x"></i>
	<i class="icon-linkedin-sign icon-4x"></i>
	<i class="icon-github-sign icon-4x"></i>
	
	<span class="icon social x-large darkgray" data-icon="1"></span>
	<span class="icon social x-large black" data-icon="w"></span>
	<span class="icon x-large pink" data-icon="*"></span>
	<span class="icon social x-large green" data-icon="v"></span>
	
	<h5>Button w/Icon</h5>
	<a class="button orange small" href="#"><i class="icon-rss"></i> RSS</a>
	</div>
	
	<hr />
	
	<div class="col_3">
	<h4>Column 1</h4>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
	magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis</p>
	</div>
	
	<div class="col_3">
	<h4>Column 2</h4>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
	magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis</p>
	</div>
	
	<div class="col_3">
	<h4>Column 3</h4>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
	magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis</p>
	</div>
	
	<div class="col_3">
	<h4>Column 4</h4>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
	magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis</p>
	</div>
</div>
</div>

</div>

